<template>
	<div class="pages">
		<div style="position: absolute;left: 50%;top: 40%;transform: translate(-50%,-50%);width: 100%;">
			<div style="color: #fff; width: 80%;text-align: center;margin:40px auto;">
				<h1>{{config.webName}}</h1>
				<h1 style="margin-top: 40px;">加盟热线：{{config.jmTel}}</h1>
			</div>
			<div class="flex flex-row-around" style="width: 80%;margin:auto;">
				<div @click="selectCar(index)" :class="car_type==index?'change':''"
					v-for="(item,index) in carClassify" :key="index" class="block " style="padding: 40px 0;">
					<img style="width: 80px; height: 80px" :src="car_type==index?item.src:item.srcs"></img>
					<div>{{item.name}}</div>
				</div>
			</div>
			<div style="text-align: center;color:#fff;margin-top: 40px;">
				<h2>{{config.jmTxt}}</h2>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				config:'',
				car_type: 0,
				carClassify: [{
					name: "小车",
					src: require('@/assets/images/carTpye1.png'),
					srcs: require('@/assets/images/carTpye1.png'),
				}, {
					name: "货车",
					src: require('@/assets/images/carTpye3_s.png'),
					srcs: require('@/assets/images/carTpye3.png'),
				}, {
					name: "客车",
					src: require('@/assets/images/carTpye2_s.png'),
					srcs: require('@/assets/images/carTpye2.png'),
				}, {
					name: "摩托车",
					src: require('@/assets/images/carTpye4_s.png'),
					srcs: require('@/assets/images/carTpye4.png'),
				}],
			}
		},
		created() {
			this.getConfig()
		},
		methods:{
			selectCar(e) {
				this.car_type = e;
				this.$router.push('/index')
				this.$store.commit('ADD_CARTYPEPARAMS',{
					car_type: e,
					carObject:this.carClassify[e]
				})
			},
			getConfig(){
				this.axios.post("/index/getConfig", {
				}).then(res => {
					this.config=res;
				}).catch(error => {})
			}
		}
	}
</script>

<style scoped>
	.block{
		background: #fff;
		width: 10%;
		text-align: center;
		border-radius: 10px;
	}
	.pages {
		overflow: hidden;
		background: linear-gradient(top, #008EFF,#17C5FF);
		width: 100%;
		height: 100vh;
	}
</style>